<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>

		<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
		<script src="../jquery.js" type="text/javascript"></script>
		<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
		<script src="../cordova.js" type="text/javascript"></script>
        
        
        <script type="text/javascript">
        	function showMyAlert(text){
        		$.mobile.loadMessageTextVisible = true;
        		$.mobile.showPageLoadingMsg("a",text,true);
        	}
        	function myAlert(){
        		showMyAlert(text);
        		setTimeout(hideLoading,2000);
        	}
        	function hideLoading(){
        		$.mobile.hidePageLoadingMsg();
        	}
        </script>
        
        <script type="text/javascript">
        	$(function(){
        		document.addEventListener('deviceready',myDeviceready,false);
        	})
        
        	function myDeviceready(){
        		//alert('加载完成!!!');
        		console.log('加载完成');
        		document.addEventListener('pause',myPause,false);
        		document.addEventListener('resume',myResume,false);
        		
        		document.addEventListener('online',myOnline,false);
        		document.addEventListener('offline',myOffline,false);
        		
        		document.addEventListener('backbutton',myBackbutton,false);
        		document.addEventListener('menubutton',myMenubutton,false);
        		
        		//batterystatus
        		window.addEventListener('batterystatus',myBatterystatusListener,false);
        		
        		window.addEventListener('batterycritical',myBatterycritical,false);
        		window.addEventListener('batterylow',myBatterylow,false);
        		
        	}
        	
        	//应用被设置为后台以后执行的函数
        	function myPause(){
        		console.log('应用被设置在后台');
        		$('#deviceCurrentStatus .ui-btn-text').text('应用被置为后台');
        	}
        	
        	//应用被设置成前台
        	function myResume(){
        		console.log('应用被设置在前台');
        		$('#deviceCurrentStatus .ui-btn-text').text('应用被置为前台');
        	}
        	
        	//连接网络的时候执行的事件
        	function myOnline(){
        		console.log('连接网络的时候执行的事件');
        		$('#deviceConectionStatus .ui-btn-text').text('连接网络的时候执行的事件');
        	}
        	
        	//断开网络执行的事件
        	function myOffline(){
        		console.log('断开网络执行的事件');
        		$('#deviceConectionStatus .ui-btn-text').text('断开网络执行的事件');
        	}
        
        
        	var backcount=0;
        	var menucount=0;
        	//点击返回按钮事件
        	function myBackbutton(){
        		console.log('返回按钮被点击');
        		backcount++;
        		$('#backButtonTouch .ui-btn-text').text('返回按钮被点击了'+backcount+'次');
        	}
        
        	//菜单按钮
        	function myMenubutton(){
        		console.log('菜单按钮被点击');
        		menucount++;
        		$('#menuButtonTouch .ui-btn-text').text('菜单按钮被点击'+menucount+'次');
        	}
        
        	//电量状态
        	function myBatterystatusListener(info){
        		console.log('查看当前电量值'+info.level);
        		$('#batterystatus .ui-btn-text').text('查看当前电量值'+info.level);
        		console.log('是否充电'+info.isPlugged);	
        	}
        
        	//电量低于20%
        	function myBatterycritical(info){
        		console.log('当电量低于20%的时候触发'+info.level);
        	}
        
         	//电量低于20%
        	function myBatterylow(info){
        		console.log('电量低于5%的时候触发'+info.level);
        	}       
        
        
        
        </script>
        
    </head>
    <body>
	<div data-role="page">
		<div data-role="header">
			<h1>PhoneGap实战</h1>
		</div>
		<div data-role="content">
			<a href="#" data-role="button" id="deviceStatus">设备加载中....</a>
			<a href="#" data-role="button" id="deviceCurrentStatus">应用为前台</a>
			<a href="#" data-role="button" id="deviceConectionStatus">连接加载中....</a>
			<a href="#" data-role="button" id="backButtonTouch">返回按钮被按0次</a>
			<a href="#" data-role="button" id="menuButtonTouch">菜单按钮被按0次</a>
			<a href="#" data-role="button" id="batterystatus">电量获取中...</a>
		</div>
		<div data-role="footer">
			<h4>&nbsp;</h4>
		</div>
	</div>
    </body>
</html>
